import Taro, { Current } from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View } from '@tarojs/components'
import { AtList, AtListItem } from 'taro-ui'

import CTopbar from '../../../components/CTopBar/index'
import { get_distribution_records_api } from './service'
import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度
import './index.scss'

/**
 * 分销记录
 */
class DistributionRecords extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = { pageSize: 20, pageNum: 1, distributionRecordsData: [] }
  }

  componentDidMount() {
    this.get_distribution_records()
  }

  async get_distribution_records() {
    const { pageSize, pageNum } = this.state
    const params = {
      pageSize,
      pageNum,
    }
    await get_distribution_records_api(params).then(({ result, data }) => {
      this.setState({
        distributionRecordsData: data,
      })
    })
  }

  render() {
    const { distributionRecordsData } = this.state
    const commissionType = ['', '直推收入', '间推收入', '团队奖']
    return (
      <View style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <View className='header'>
          <CTopbar title='分销记录' showBack></CTopbar>
        </View>
        <View className='main'>
          <AtList>
            {distributionRecordsData.map((item) => {
              return <AtListItem title={item.amount + '元'} extraText={commissionType[item.commissionType]} />
            })}
          </AtList>
        </View>
      </View>
    )
  }
}

export default DistributionRecords
